<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>iSeaJs - regex-weburl </title>

	<!--// AliceUI基础样式 -->
	<link href="assets/styles/one.css" rel="stylesheet" type="text/css" />
	<style>
		.wrapper {
		    width: 990px;
		    margin: 0 auto;
		}
	</style>
</head>

<body>
	<div class="wrapper">
		<div class="ui-grid-row">
			<div class="ui-grid-25">
				<div class="ui-box">
				    <div class="ui-box-head">
				        <div class="ui-box-head-border">
				        	<h3 class="ui-box-head-title">App/regex-weburl</h3>
				        </div>
				    </div>
				    <div class="ui-box-container">
				        <div class="ui-box-content">

					        <form action="#" class="ui-form" id="re_form">
					        	<fieldset>
					        		<legend>正则验证URL合法性</legend>
					        		<div class="ui-form-item">
					        		    <label for="re_text" class="ui-label">URL</label>
					        		    <input class="ui-input" type="text" id="re_text" />
					        		    <p class="ui-form-explain ui-tiptext ui-tiptext-error">
					        		        输入需要验证的url
					        		    </p>
					        		</div>

					        		<div class="ui-form-item">
					        		    <input type="submit" id="re_submit" class="ui-button ui-button-morange" value="确定">
					        		    <input type="button" id="re_reset" class="ui-button ui-button-mwhite" value="清空">
					        		</div>
					        	</fieldset>
					        </form>

				        </div>
				    </div>
				</div>
			</div>
		</div>
	</div>

<!--// 引入seajs -->
<script src="./assets/scripts/sea-modules/seajs/2.1.1/sea.js" id="seajsnode"></script>
<script src="./assets/scripts/sea-modules/config.js"></script>

<script type="text/javascript">

seajs.use([
	'$',
	'validator',
	'app/regexWeburl/main.js'
], function ($, Validator, regexWeburl) {

	// 根据AliceUI定制显示内容
	var NewValidator = Validator.extend({
            attrs: {
                showMessage: function (message, element) {
                    message = '<i class="ui-tiptext-icon iconfont">&#xF045;</i>\
                               <span class="ui-form-explain-text">' + message + '</span>';
                    this.getExplain(element)
                        .addClass('ui-tiptext ui-tiptext-error')
                        .html(message);
                    this.getItem(element).addClass(this.get('itemErrorClass'));
                }
            }
        });
	window.console && console.log && console.log(regexWeburl.reWeburl());
	NewValidator.addRule('weburl', regexWeburl.reWeburl(), '请输入合法的{{display}}');

	// 初始化Validator插件
	var re = new NewValidator({
			element: '#re_form',
			onFormValidated: function(err, results, form) {
				window.console && console.log && console.log(err, results, form);
			},
			failSilently: true
		});

	re.addItem({
		element: '#re_text',
		required: true,
		rule: 'weburl'
	});

	$('#re_reset')
		.off('.re')
		.on('click.re', function(){
			$('#re_text').val('');
			re.execute(function(error, results, element) {
		        window.console && console.log && console.log(arguments);
		    });
		})

});
</script>


</body>
</html>